<template>
    <view>
        <view class="search_menu">
            <view
                @click="changeEvent(index)"
                :class="index == type ? 'search_menu_item_sel' : 'search_menu_item'"
                v-for="(item, index) in menu"
                :key="index"
                >{{ item }}</view
            >
        </view>
        <view v-if="type == 0" class="artile_list">
            <view
                @click="goToArticle(artileIndex)"
                class="article-item"
                v-for="(artile, artileIndex) in artileList"
                :key="artileIndex"
            >
                <view class="article-left">
                    <image :src="artile.coverAbsolute" style="border-radius: 8rpx; width: 256rpx; height: 180rpx">
                    </image>
                </view>
                <view class="article-right">{{ artile.title }}</view>
            </view>
            <view
                v-if="artileList.length == 0 && isloading == false"
                style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    background-color: #f8f8f8;
                "
            >
                <image
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                    style="margin-top: 136rpx; width: 316rpx; height: 316rpx"
                ></image>
                <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">暂无收藏文章</label>
            </view>
        </view>
        <view v-if="type == 1" class="dynamic_list">
            <view
                style="width: 100%; margin-top: 30rpx; background-color: #fff; border-radius: 24rpx"
                @click="goToDetail(dindex)"
                class="article-main"
                v-for="(dynamicItem, dindex) in trendList"
                :key="dindex"
            >
                <view style="margin: 30rpx">
                    <view class="search-article">
                        <view @click.stop="goToHomePage(dynamicItem.userId)" class="article-left">
                            <view class="article-avatar">
                                <u-image width="80rpx" height="80rpx" :src="dynamicItem.avatarAbsolute" shape="circle">
                                </u-image>
                            </view>
                            <view class="article-title1">
                                <view>{{ dynamicItem.userName }}</view>
                                <view class="article-time"
                                    >{{ request.getDateTimeFormat(dynamicItem.publishTime) }}
                                    <text>发布了</text>
                                </view>
                            </view>
                        </view>
                        <view v-if="userInfo.uid != dynamicItem.userId">
                            <view
                                class="search-right1"
                                @click.stop="goCollect(dynamicItem)"
                                v-if="dynamicItem.followStatus == 0"
                            >
                                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>关注
                            </view>
                            <view class="search-right2" v-else @click.stop="goCollect(dynamicItem)">已关注</view>
                        </view>
                    </view>
                    <view class="articleTitle">{{ dynamicItem.title }}</view>
                    <view class="articleContent">{{ dynamicItem.experience || dynamicItem.content }}</view>
                    <view style="position: relative" class="articleImg">
                        <image
                            @click.stop="showImagePrevie(index, dynamicItem)"
                            v-for="(img, index) in dynamicItem.picList.slice(0, 3)"
                            :key="index"
                            :src="img"
                            mode=""
                        >
                        </image>
                        <label
                            v-if="dynamicItem.picList.length > 3"
                            style="
                                border-top-left-radius: 10rpx;
                                border-bottom-right-radius: 24rpx;
                                line-height: 48rpx;
                                width: 48rpx;
                                height: 48rpx;
                                text-align: center;
                                font-size: 22rpx;
                                color: #fff;
                                background-color: rgba(0, 0, 0, 0.4);
                                position: absolute;
                                float: right;
                                top: auto;
                                bottom: 0;
                                right: 10rpx;
                            "
                            >+{{ dynamicItem.picList.length - 3 }}</label
                        >
                    </view>
                    <view class="articleBottom" style="justify-content: space-between">
                        <view
                            @click.stop="goToSigleTopic(dynamicItem.topicId)"
                            v-if="dynamicItem.topicId"
                            class="articleBottom-left"
                        >
                            <view class="text">#</view>
                            <view class="one_line">{{ dynamicItem.topicName }}</view>
                        </view>
                        <view v-else style="height: 34rpx; width: 34rpx"></view>
                        <view class="articleBottom-right">
                            <view class="article-message">
                                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png"></image
                                ><text>{{ dynamicItem.comments }}</text>
                            </view>
                            <view @click.stop="doTrends(dynamicItem)" class="article-message">
                                <image
                                    v-if="dynamicItem.thumbsStatus == 0"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                                ></image>
                                <image
                                    v-if="dynamicItem.thumbsStatus == 1"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                                ></image>
                                <text v-if="dynamicItem.thumbsStatus == 0">{{ dynamicItem.thumbs }}</text>
                                <text v-if="dynamicItem.thumbsStatus == 1" style="color: #ff6f89">{{
                                    dynamicItem.thumbs
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="trendList.length == 0 && isloading == false"
                style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    background-color: #f8f8f8;
                "
            >
                <image
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                    style="margin-top: 136rpx; width: 316rpx; height: 316rpx"
                ></image>
                <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">暂无收藏动态</label>
            </view>
        </view>
        <u-loadmore
            v-if="more"
            :status="status"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="20"
            marginBottom="30"
        ></u-loadmore>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            type: 0,
            menu: ['文章', '动态'],
            artileList: [],
            trendList: [],
            isloading: false,
            artileForm: {
                pageNum: 1,
                pageSize: 20,
                orderByColumn: 'create_time',
                isAsc: 'descending',
            },
            status: 'loadmore',
            more: false,
            trendForm: {
                pageNum: 1,
                pageSize: 20,
                orderByColumn: 'collection_time',
                isAsc: 'descending',
            },
        };
    },
    computed: {
        ...mapState(['isLogin', 'userInfo']),
    },
    onReachBottom() {
        if (this.type === 0) {
            this.artileForm.pageNum = ++this.artileForm.pageNum;
        } else {
            this.trendForm.pageNum = ++this.trendForm.pageNum;
        }
        this.requestMain();
    },
    methods: {
        goToHomePage(userId) {
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${userId}`,
            });
        },
        showImagePrevie(index, item) {
            uni.previewImage({
                urls: item.picList,
                current: index,
            });
        },
        goToDetail(index) {
            uni.setStorageSync('collectDetails', 'collectDetails');
            uni.navigateTo({
                url: `/pages/community/dynamicDetail/dynamicDetail?id=${this.trendList[index].id}`,
            });
        },
        goToSigleTopic(id) {
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${id}`,
            });
        },
        changeEvent(index) {
            this.type = index;
            let queryForm = this.type === 0 ? this.artileForm : this.trendForm;
            if (queryForm.pageNum <= 1) {
                this.requestMain();
            }
        },
        requestMain() {
            this.isloading = true;
            let queryForm = this.type === 0 ? this.artileForm : this.trendForm;
            if (queryForm.pageNum === 1) {
                if (this.type == 0) {
                    this.artileList.length = 0;
                } else if (this.type == 1) {
                    this.trendList.length = 0;
                }
            }
            this.request.httpTokenRequest(`/mp-api/wx/my/collect/${this.type}`, queryForm, 'POST', true).then((res) => {
                uni.stopPullDownRefresh();
                this.isloading = false;
                if (res.code == 0) {
                    if (this.type == 0) {
                        this.artileList.push(...res.data.list);
                    } else if (this.type == 1) {
                        this.trendList.push(...res.data.list);
                    }
                }
            });
        },
        goToArticle(index) {
            uni.setStorageSync('collectDetails', 'collectDetails');
            uni.navigateTo({
                url: `/packageHome/pages/article/detail?id=${this.artileList[index].id}`,
            });
        },
        goCollect(item) {
            let form = {
                id: item.userId,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        this.trendList.forEach((dynamicI) => {
                            if (dynamicI.userId == item.userId) {
                                dynamicI.followStatus = 1;
                            }
                        });
                    }
                });
            } else {
                uni.showModal({
                    cancelText: '取消',
                    confirmText: '确定',
                    title: '是否确定取消关注此用户？',
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        uni.showToast({
                                            icon: 'none',
                                            title: res.message,
                                        });
                                    } else {
                                        this.trendList.forEach((dynamicI) => {
                                            if (dynamicI.userId == item.userId) {
                                                dynamicI.followStatus = 0;
                                            }
                                        });
                                    }
                                });
                        }
                    },
                });
            }
        },
        doTrends(item) {
            let form = {
                id: item.id,
                thumbsStatus: 1,
            };
            if (item.thumbsStatus == 0) {
                form.thumbsStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 1;
                        item.thumbs = item.thumbs + 1;
                    }
                });
            } else {
                form.thumbsStatus = 0;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: 'none',
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 0;
                        if (item.thumbs > 0) {
                            item.thumbs = item.thumbs - 1;
                        }
                    }
                });
            }
        },
    },
    onLoad() {
        this.requestMain();
    },
    onShow() {
        const collectDetails = uni.getStorageSync('collectDetails');
        if (collectDetails) {
            if (this.type === 0) {
                this.artileForm.pageNum = 1;
            } else {
                this.trendForm.pageNum = 1;
            }
            this.requestMain();
            uni.removeStorageSync('collectDetails');
        }
    },
    onPullDownRefresh() {
        if (this.type === 0) {
            this.artileForm.pageNum = 1;
        } else {
            this.trendForm.pageNum = 1;
        }
        this.requestMain();
    },
};
</script>

<style scoped>
.search_menu {
    height: 94rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    background-color: #fff;
}

.search_menu_item {
    height: 94rpx;
    width: 50%;
    line-height: 94rpx;
    font-size: 30rpx;
    text-align: center;
    font-weight: 500;
    color: #999999;
}

.search_menu_item_sel {
    height: 94rpx;
    width: 50%;
    line-height: 94rpx;
    font-size: 30rpx;
    text-align: center;
    font-weight: 500;
    color: #333333;
    position: relative;
}

.search_menu_item_sel::after {
    content: '';
    position: absolute;
    left: calc(50% - 16rpx);
    top: auto;
    bottom: 0;
    right: auto;
    height: 6rpx;
    width: 32rpx;
    background: linear-gradient(296deg, #36a782 0%, #56ccab 100%);
    box-shadow: 0px -4rpx 16rpx 0rpx rgba(57, 171, 134, 0.5);
}

.artile_list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dynamic_list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.one_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex: 1;
}

.articleBottom-left {
    border: 1rpx solid #ccc;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    line-height: 34rpx;
    font-weight: 400;
    height: 46rpx;
    padding-right: 12rpx;
    flex-direction: row;
}

.articleBottom-left .text {
    background-color: #ff822e;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    width: 34rpx;
    height: 34rpx;
    margin-right: 6rpx;
}

.articleBottom-right {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
